<template>
	<Container>
		<view class="header">
			<view class="selectBox" v-for="(item, index) in assignment.optionArticles" :key="index">
				<image class="img" :src="item.imageUrl" mode="aspectFit"></image>
			</view>
			<AudioIcon @iconTap="iconTap" :questionPress="questionPress" />
		</view>
		<Question :question="assignment.articles[speakCurrent].questionName" />
		<Record class="record" ref="audio" @recordFinish="recordFinish" :isStart="questionPress" :answerText="assignment.answerTexts" :typeCode="assignment.typeCode" />
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import AudioIcon from '../audioIcon.vue'
import Question from '../questionName.vue'
import Container from '../container.vue'
import Record from '../record.vue'
export default {
	data() {
		return {
			speakCurrent: 0,
			audioUrl: ''
		}
	},
	mixins: [mixins],
	components: { AudioIcon, Question, Container, Record },
	methods: {
		questionPlay: async function() {
			const text = this.assignment.articles[this.speakCurrent].questionName
			const data = await this.parseTextAudio({
				text: text
			})
			this.dialogueAudio({
				src: data,
				start: () => {
					this.questionPress = true
				},
				end: () => {
					this.questionPress = false
					console.log(this.questionPress)
				}
			})
		},
		recordFinish: function(audioData) {
			if (this.speakCurrent === this.assignment.articles.length - 1) {
				this.audioUrl = this.audioUrl + ',' + audioData.audioUrl
				this.$parent.next({
					isSure: audioData.isAudioWithTexts,
					audioUrl: this.audioUrl
				})
			} else {
				this.audioUrl = audioData.audioUrl
				if (audioData.isAudioWithTexts) {
					this.speakCurrent++
					this.$refs.audio.initStatus()
					this.questionPlay()
				} else {
					this.$parent.next({
						isSure: audioData.isAudioWithTexts,
						audioUrl: audioData.audioUrl
					})
				}
			}
		}
	}
}
</script>

<style scoped lang="stylus">
.header
	width 720rpx
	height 50vh
	border 10rpx solid #FFD9A2
	box-sizing border-box
	border-radius 60rpx
	background white
	display flex
	align-items center
	justify-content center
	flex-wrap wrap
	position relative
	margin 5vh 0
	.selectBox
		transition all 0.4s
		width 33%
		height 45%
		display flex
		align-items center
		justify-content center
		image
			width 80%
			height 70%
</style>
